<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <title>控制媒体回放3</title>
</head>
<body>
<div>
    <button id="playback-controller">Play</button>
    <button id="mute-controller">Mute</button>
</div>
<video id="ddd-video">
    <source src="">
    <source src="">
</video>
<script>
    var video = document.getElementById('bbb-video');
    var playButton = document.getElementById('playback-controller');
    var muteButton = document.getElementById('mute-controller');

    function pauseHandler(e) {
        playButton.innerHTML = 'Resume';
    }

    function playingHandler(e) {
        playButton.innerHTML = 'Pause';
    }

    function volumechangeHandler(e) {
        muteButton.innerHTML = video.muted ? 'Unmute' : 'Mute';
    }

    function playbackClick(e) {
        video.paused ? video.play() : video.pause();
    }

    function muteClick(e) {
        video.muted = !video.muted;
    }

    video.addEventListener('pause', pauseHandler);
    video.addEventListener('playing', playingHandler);
    video.addEventListener('volumechange', volumechangeHandler);

    playButton.addEventListener('click', playbackClick);
    muteButton.addEventListener('click', muteClick);
</script>
</body>
</html>